Method for serving interactive content to a user

ABSTRACT

A variation of a method for serving interactive content includes: inserting a parent card into a visual element; inserting a set of child cards over the parent card in the visual element, each child card including advertising content related to the parent card; in response to a swipe over the visual element following insertion of the visual element into a document rendered on a display, indexing through the set of child cards rendered over the parent card; in response to selection of a child card, triggering the computing device to open an expanded window over the document; rendering expanded variants of child cards within the expanded window; in response to a swipe over the expanded window, indexing through expanded variants of the set of child cards rendered; and, in response to selection of an expanded variant of a particular child card, triggering the computing device to navigate to an external document associated with the particular child card.

CROSS-REFERENCE TO RELATED APPLICATIONS

This application is a continuation of U.S. patent application Ser. No.17/325,074, filed on 19 May 2021, which is a continuation of U.S. patentapplication Ser. No. 15/677,259, filed on 15 Aug. 2017, which claims thebenefit of U.S. Provisional Application No. 62/375,228, filed on 15 Aug.2016, which is incorporated in its entirety by this reference.

The application is related to U.S. patent application Ser. No.15/217,879, filed on 22 Jul. 2016, which is incorporated in its entiretyby this reference.

TECHNICAL FIELD

This invention relates generally to the field of mobile advertising andmore specifically to new and useful methods for serving interactivecontent to a user in the field of mobile advertising.

BRIEF DESCRIPTION OF THE FIGURES

FIG. 1 is a flowchart representation of a method;

FIG. 2 is a flowchart representation of one variation of the method;

FIG. 3 is a flowchart representation of one variation of the method; and

FIG. 4 is a flowchart representation of one variation of the method.

DESCRIPTION OF THE EMBODIMENTS

The following description of embodiments of the invention is notintended to limit the invention to these embodiments but rather toenable a person skilled in the art to make and use this invention.Variations, configurations, implementations, example implementations,and examples described herein are optional and are not exclusive to thevariations, configurations, implementations, example implementations,and examples they describe. The invention described herein can includeany and all permutations of these variations, configurations,implementations, example implementations, and examples.

1. Method

As shown in FIG. 1 , a method S100 for serving interactive content to auser includes: inserting a parent card, including advertising content,into a visual element in Block S110; inserting a set of child cards overthe parent card in the visual element, each child card, in the set ofchild cards, including a hero image, advertising content related to theparent card, and a link to a related external document in Block S120; inresponse to a swipe input over the visual element following insertion ofthe visual element into a document rendered on a display of a computingdevice, indexing through the set of child cards rendered over the parentcard within the visual element in Block S130; in response to selectionof a child card, in the set of child cards, within the visual element,triggering the computing device to open an expanded window over thedocument in Block S132; rendering expanded variants of child cards inthe set of child cards within the expanded window in Block S134; inresponse to a swipe input over the expanded window, indexing throughexpanded variants of the set of child cards rendered within the expandedwindow in Block S140; and in response to selection of an expandedvariant of a particular child card within the expanded window,triggering the computing device to navigate to an external documentassociated with the particular child card based on a link associatedwith the particular child card in Block S142.

2. Applications

Generally, the method S100 can be executed by an advertising (or “ad”)platform to serve serialized, hierarchical branded content to a userthrough a visual element embedded into a webpage accessed through a webbrowser or embedded into a native application executing on a smartphone,tablet, smart watch, laptop computer, desktop computer, or othercomputing device. In particular, the method S100 can be executed by anad platform (and/or an ad tech vendor, a publisher, an ad agency, or anonline social networking platform, etc.) to: generate a visual elementcontaining multiple content streams or aspects of a brand, a productsupplied by the brand, or a service provided by the brand, etc.; toinsert the visual element in-line with content in a webpage or documentwithin a native application at a user's computing device; and to advancethrough a tiered hierarchy of information density for each contentstream or aspect as the user engages further with content in the visualelement.

Blocks of the method S100 can be executed by an ad platform toincorporate serialized and/or multi-faceted editorial content into asingle visual element—representing this content in multiple levels ofabstraction—that, when embedded into a webpage or native application,advances through a sequence of visual elements, expanded windows, andexternal webpages to serve this content to a user in lower levels ofabstraction as the user's engagement with the content increases. Forexample, the ad platform can execute Blocks of the method S100 to:incorporate a title and global abstract from a microsite (describedbelow) into a parent card within a visual element; to incorporate a heroimage and a chapter heading from each section or webpage within themicrosite into one corresponding child card; to incorporate an abstract,a secondary image, or other additional local content from acorresponding section or webpage within the microsite into the expandedvariant of each child card; and to link the expanded variant of eachcorresponding child card to its corresponding webpage or section (e.g.,via an anchor tag) within the microsite in Blocks S110 and S112. In thisexample, the ad platform (and/or an ad tech vendor, a publisher, or anad agency, etc.) can insert a visual element—containing the parent cardwrapping the set of child cards—in-line with text and/or other mediawithin another webpage accessed through a web browser executing on theuser's smartphone (or other computing device) in Block S120. The visualelement can show multiple child cards simultaneously, such as a firstchild card (in the ordered set of child cards) and a section of a secondchild card to the right of the first child card; if content in thevisual element piques the user's interest and the user swipes over thevisual element or taps on the expand icon, the visual element can scrolllaterally through the child cards wrapped by the parent card in BlockS130. If the user selects the parent card, such as by selecting thetitle within the parent card, the visual element can navigate to thehome page or to the top of the associated microsite. Alternatively, ifthe user selects one of the child cards, the visual element can open anexpanded window over the website, show the expanded variant of theselected child card within the expanded window—including additionaltextual or visual content—in Block S132, and scroll laterally throughthe expanded variants of the child cards within the expanded window ifthe user swipes laterally over the expanded window in Block S140. If theuser then selects the expanded variant of a particular child card withinthe expanded window, the visual element can then navigate to aparticular webpage or to a particular section of one webpage within themicrosite corresponding to the selected child card in Block S142.Alternatively, the visual element can close the expanded window if theuser selects a close button on the expanded window. To prompt the userto engage with content within the visual element, the visual element canalso animate content within one or more child cards, such as based onspeed and directions of scroll events occurring within a documentcontaining the visual element.

The visual element can therefore: present a global theme or title (i.e.,a “first tier”) within a parent card to the user; present a local titleor heading for each of multiple discrete content streams relating to theglobal theme or title within corresponding child cards (i.e., a “secondtier”) wrapped within the parent card; present expanded variants of eachchild card—including an abstract, description, or additional secondaryimage—(i.e., a “third tier”) within an expanded window popping out fromthe visual element when the child card is selected by the user; and linkto a particular webpage or section of a webpage (i.e., a “fourth tier”)when an expanded variant of a corresponding child card is selected fromthe expanded window. In particular, by sequentially increasing access tocontent in different streams relating to the global theme, the visualelement can enable a user viewing the visual element to quickly visuallyaccess the global theme (the first tier), engage with a particularsubtheme within the global theme (i.e., the “second tier”), accessadditional details related to a particular subtheme (i.e., the “thirdtier”), and then access complete, original content relating to theparticular theme (i.e., the “fourth tier”).

Similarly, in a variation of the method S100 described below, the visualelement can: present to the user a global theme or hero image (i.e., “afirst tier”) including selection areas (or “hotspots”) overlaid onparticular areas of the parent card; in response to selection of aparticular area, present a child card—overlaid on top of the parentcard—detailing features and/or aspects of the particular area of theparent card with a greater degree of detail (i.e., a “second tier”);present expanded variants of each child card (i.e., “third tiers”)within an expanded window popping out from the visual element when achild card is selected by the user; and/or link to a particular webpageor section of a webpage (i.e., a “fourth tier”) when an expanded variantof a corresponding child card is selected from the expanded window. Inparticular, the visual element can enable a user interacting with thevisual element to engage with a parent card, to view content associatedwith a tier of information directly proportional to her interest levelin the content rendered in the visual element, and to cache contentassociated with tiers of information (e.g., the parent card, childcards, expanded variants, external documents) exceeding her interestlevel. Thus, the visual element can exclusively render informationrelevant to a user and avoid burdening the user with content that maynot interest the user while also permitting the user to comfortablyconsume incrementally-denser information.

Furthermore, by supplying branded content to the user both throughmultiple streams and through multiple information density tiers, thevisual element (and/or the ad platform, etc.) can also characterize theuser's engagement with this branded content at an increased resolution.For example, the visual element can characterize the user's engagementwith this content based on global interactions with the visual elementand local interactions with the child cards and expanded variants of thechild cards, such as whether the user scrolls through child cards withinthe visual element, selects a child card within the visual element,scrolls through expanded variants of child cards within the expandedwindow, selects an expanded variant of a child card within the expandedwindow, and/or views a video linked to an expanded variant of a childcard selected by the user, etc. and generates an engagement metric forthe user accordingly.

The method S100 is described herein as executed to generate a visualelement containing a parent card and a set of child cards from textualand/or visual media extracted from, copied from, or based on contentfrom a microsite (described below) and to serve these cards to a userthrough a webpage accessed within a web browser. However, the methodS100 can be executed to compile or aggregate media from one or moreexisting sources or new content into a visual element and/or to servethis visual element to a user through any other pathway, such as byinserting the visual element into a document within a native applicationexecuting on a smartphone, smartwatch, tablet, or other computingdevice.

3. Interactive Visual Ad Generation

Block S110 of the method S100 recites inserting a parent card into avisual element; and Block S112 recites inserting a set of child cardsinto the parent card, wherein each child card includes a hero image anda link to a related external document. Generally, in Blocks S110 andS112, the ad platform functions to generate a visual element thatcontains multiple streams of content—related to a common theme—inmultiple discrete information density tiers.

In one implementation, the ad platform hosts an advertiser portal thatcan be accessed by an human representative of an advertiser to populatea generic interactive visual ad template with content: from an externalmicrosite (e.g., a single webpage or cluster of highly-cohesive pagesgenerated by or on behalf of a brand); from marketing cover; from brandcover; from an article; or from other textual and visual digital mediacontaining multiple discrete subthemes, sections, chapters, episodes,members, or divisions, etc. unified under a common (i.e., global) theme.For example, an advertiser can access an instance of the advertiserportal through a native application or through a web browser executingon a desktop computer, a laptop computer, a smartphone, or a tablet andthen enter a URL of a microsite; and the advertiser portal canautomatically scrape a parent hero image, parent abstract, and parenttitle from the top of the microsite (or main page of the microsite),scrape a hero image, section title, and secondary media from eachsection (or discrete webpage) within the microsite, and populate theparent, child, and expanded variant child cards from these media.Alternatively, the advertiser can upload media (e.g., text, staticimages, videos, etc.) into the advertiser portal and manually populatetemplate parent, child, and expanded variant child cards with thesemedia to manually create the interactive visual ad. However, the adplatform can implement any other method or technique to access textualand visual media and to aggregate these media in multiple discretestreams of content—each containing content in multiple discreteinformation density tiers—affiliated with a common theme (i.e., multiplechild cards unified under one parent card).

3.1 Parent Card

A parent card can define a container for child cards and a lowestinformation density tier. The parent card can include a parent heroimage, such as a background color from the microsite, an image of aprimary icon (e.g., a brand icon) from the microsite, or a first imagecontained at the top of the microsite. The parent card can also containa title and/or a general abstract, such as a title and abstractextracted directly from the microsite or such as a title and a caption,a first sentence, the first ten words, or the first 50 charactersfollowing the title on the microsite. The parent card can furthercontain a link to external content, such as a link to the microsite withan anchor tag for the top of the microsite or a link to a homepage ofthe microsite.

The parent card can also include content related to the microsite (i.e.,a website rendered within the visual element) distinct from the documentinto which the visual element is embedded as described below. Forexample, a third-party processor (e.g., an ad server) can embed thevisual element inline in (e.g., between rows of text and images) adocument, such as a news article rendered within a webpage; the visualelement can render content, such as a mobile advertisement depicting anautomobile, that may be pertinent to a user viewing the article butdistinct from content of the article or webpage into which the visualelement is embedded.

The parent card can span the width and/or height of the visual elementto define a static background image or color over which child cards areinserted and can include a direct link to external content (e.g., to theexternal microsite).

3.2 Child Cards

A child card corresponds to one content stream under the parent card anddefines a second tier of information density for its correspondingcontent stream. In particular, a child card can define an abridgedversion of a webpage within the microsite and can include a sectiontitle and a hero image for one discrete subtheme, section, chapter,episode, member, or division, etc. within the global theme (e.g., themicrosite) of the parent card. For example, a child card can include: atextual section heading from a particular section of the microsite orfrom a secondary webpage within the microsite; and a hero imageincluding a first image from this section of the microsite or from thissecondary webpage within the microsite. In another example, a child cardcan include an image and a body of text less than a particular characterlength (e.g., a short body of text extracted from a section of a webpageof the microsite).

The ad platform can thus generate a set of (e.g., two or more) childcards per parent card and can insert each child card into one carouselposition within a virtual horizontal card carousel—over or wrapped bythe parent card—in the visual element, as shown in FIGS. 1 and 2 . Forexample, for a set of child cards containing content extracted from anordered sequence of subthemes, sections, chapters, episodes, members, ordivisions, etc. within the microsite, the ad platform can insert thesechild cards in order into carousel positions within the virtualhorizontal card carousel. In particular, the visual element can rendereach child card—including its hero image and section title—in onecarousel position in Block S120 to form a single row of child cards thatcan be scrolled through laterally within the visual element in BlockS130. The set of child cards can be ordered according to a contiguousnarrative or storyline related to and portraying the parent card'sglobal theme in a logical and sequential series.

As shown in FIG. 1 , Block S130 of the method S100, recites indexingthrough the set of child cards in response to the swipe input between afirst time and a second time. Generally, the visual element isconfigured to index or scroll through the set of child cards in responseto an input, such as a swipe, nonparallel to a scroll axis of thewindow, and over the visual element.

The visual element can render the set of child cards such that theheight of each child card, in the set of child cards, is less than theheight of the visual element and less than the height of the parent cardrendered in the visual element. Thus, at a given time, the visualelement can render one or more child cards over the parent card. Forexample, as shown in FIGS. 1 and 2 , at a first time, the visual elementcan render the parent card, a first child card over the parent card at acentral position, and a portion of a second child card over the parentcard adjacent the first child card. At a second time succeeding thefirst time, in response to a swipe event, the visual element can indexto the second card, thereby rendering a portion of the first cardadjacent (e.g., to the left of) the second card, the second card in itsentirety in the central position, and a portion of a third card opposite(e.g., to the right of) the second card.

3.3 Expanded Variant Child Cards

A child card can include additional content that is displayed within theexpanded window when a child card in the visual element is selected bythe user, thereby defining a third tier of information density for thechild card's content stream. For example, an expanded variant of a childcard can include a secondary image (e.g., a static image or a GIF)extracted from the corresponding section of the microsite. Additionally,the expanded variant of the child card can include additional text, suchas: a chapter abstract, a first sentence, a first 140 characters, animage description for its hero image, a body of text greater than theparticular character length described above, etc. extracted (e.g.,copied) from the corresponding section or webpage within the microsite.Furthermore, the expanded variant of a child card can include anenlarged version of the corresponding hero image shown in a child cardwithin the visual element. When presented in the expanded windowfollowing selection of a card in the visual element, an expanded (i.e.,enlarged) variant of a child card can present the enlarged version ofthe hero image, the section title (described above), and this secondarycontent, such as arranged vertically under the enlarged hero image, asshown in FIGS. 1, 2, and 3 .

Block S132 of the method S100 recites triggering the computing device toopen the expanded window over the document. In this implementation, thecomputer system can render (or “open”) the expanded window of a heightgreater than the height of the visual element and overlaid on top of thedocument. For example, as described above, the visual element can beembedded into a document between lines of text and/or images. Thecomputer system can, in response to detecting selection of a particularchild card, open the expanded window arranged over the text and imagesof the document such that a portion of the document and the visualelement are obscured.

The expanded variant of a child card can also include: a link and anchortag to the corresponding section or secondary webpage within theexternal microsite; a link to a (full-screen) video; a link to a map; ora link to any other external content related to the correspondingcontent stream.

When a child card in the visual element is selected and the expandedwindow opened, the expanded window can also present an expanded variantof the parent card behind the expanded variants of the child cards. Forexample, the expanded variant of the parent card can include an enlargedparent hero image containing a link the homepage of the microsite.

3.4 External Document

As shown in FIGS. 1 and 2 , Block S142 of the method S100 recites, inresponse to selection of an expanded variant of a particular child cardwithin the expanded window, triggering the computing device to navigateto an external document associated with the particular child card basedon a link associated with the particular child card. Generally, thecomputer system is configured to navigate to a document, such as a webarticle or webpage related to a particular child card and/or expandedvariant of a child card in response to selection of the child card by auser.

In one implementation, the visual element can pull contents of theexternal document (e.g., a microsite) associated with tiered content(e.g., the parent card) contained within the visual element or expandedwindow—on top of the current document—thereby enabling the user toaccess the document into which the visual element is embedded, whileviewing the external document.

3.5 Dynamic Hero Images

In one variation, a child card contains dynamic content. In oneimplementation, the dynamic child card includes a dynamic image (e.g., aGIF) representing a sequence of frames, and the visual element indexesthrough these frames according to a static animation delay time for thedynamic image when the dynamic child card is shown in the visual element(e.g., when the carousel position containing the dynamic child card iscentered in the visual element) and when the visual element is shown onthe display of the computing device. In a similar implementation, thedynamic child card includes scrolling text, such as a section title andan abstract for the corresponding section, and the visual element cyclesthrough this text at a preset rate when the visual element and dynamicchild card are shown on the display of the computing device.

In another implementation, the dynamic child card includes a sequence offrames representing a video segment. In this implementation, when thevisual element and the dynamic child card are rendered—within awebpage—on the display of a computing device, the visual element can:seek forward through this sequence of frames as the user scrolls downthrough the webpage; and seek backward through the sequence of frameswithin the video as the user scrolls up through the webpage, therebyenabling the user to control which frame in the video sequence is shownwithin the dynamic child card by scrolling up and down through thewebpage. In a similar implementation, the visual element can:automatically replay the video segment when both the visual element andthe dynamic child card are shown on the display; seek backward throughframes in the video segment when the user scrolls up through thewebpage; seek forward through frames in the video segment when the userscrolls down through the webpage; pause replay of the video segment viewwhen the user holds the position of the webpage on the display withoutscrolling up or down; and then continue replay of the video segment whenthe user releases a hold or terminates a scroll event. In thisimplementation, the visual element can replay the video segment withinthe dynamic child card on a continuous loop while the dynamic child cardand visual element are shown on the display of the computing device, orthe visual element can set the dynamic child card to present a statichero image once a first replay of the video segment has completed. Inthe foregoing implementations, when a child card is selected from thevisual element to trigger the expanded window, the expanded variant ofthe dynamic child card can present a static hero image within theexpanded window. Alternatively, the dynamic child card can automaticallyreplay the video segment from start to finish (and in a loop)—withoutscroll and pause controls—when the dynamic child card is shown in theexpanded window. The expanded variant of the dynamic child card can alsoinclude a link to a complete video (represented by the sequence offrames in the video segment), and the webpage containing the visualelement and expanded window can access and replay the complete videowithin a video player when the expanded variant of the dynamic childcard is selected (e.g., rather than triggering the computing device tonavigate to the corresponding webpage within the affiliated microsite).(Alternatively, when the webpage containing the visual element is viewedon a laptop or desktop computer, the interactive visual ad can replaythe complete video within the dynamic child card, such as over or inplace of the hero image in the dynamic child card.)

In another implementation, the dynamic child card can include a dynamichero image containing a geospatial map, such as showing the location ofthe computing device relative to a store, theatre, or venue carrying aproduct or providing a service related to the brand represented by theinteractive visual ad. For example, when the dynamic child card is shownin the visual element, the hero image can include a static image;however, the expanded variant of the dynamic child card can query a GPSsensor within the computing device (or IP address or data retrieved froma third-party source) for its current location, query a remote serverfor relevant locations nearby, and show the location of the computingdevice and relevant nearby locations on a geospatial map once theexpanded window is opened upon selection of a child card from the visualelement.

However, in this variation, a dynamic child card can include a dynamicimage containing any other dynamic content.

4. Content Examples

In one example shown in FIG. 2 , the interactive visual ad is populatedwith food recipe content containing ingredients supplied by a foodbrand. In this example, the interactive visual ad includes: a parentcard containing a logo of the food brand, a title reciting “30-minutedinners,” and an abstract reciting “Have dinner ready is 30 minutes.Ready. Set. Cook.”; and a set of child cards, each child card containinga name of a unique recipe and a hero image of the recipe. In thisexample, when a child card shown in the visual element within a webpageis selected and an expanded window thus opened over the webpage, theexpanded variant of each child card can present: an enlarged version ofthe hero image; a (complete or incomplete) list of ingredients for itscorresponding recipe; and a link to an external webpage or section of anexternal microsite containing directions for preparing the recipe. Inthis example, the interactive visual ad can include a child cardcontaining a link to a video (rather than a link to an external webpage)showing preparation of a recipe, a web browser accessing the webpagecontaining the interactive visual ad can play the video within a videoplayer over the webpage when the expanded variant of this child card isselected by the user.

In another example shown in FIG. 3 , the interactive visual ad ispopulated with editorial content or “thought leadership” from a brand.In this example, the interactive visual ad includes: a parent cardcontaining a logo of the brand, a title reciting “Mothers of Invention,”and an abstract reciting “See how mothers of invention continue to pushthe boundaries of culture technology”; and a set of child cards, eachchild card containing a name of a unique female inventor and a heroimage of the inventor and/or a technology she developed. In thisexample, when a child card shown in the visual element within a webpageis selected and an expanded window thus opened over the webpage, theexpanded variant of each child card can present: an enlarged version ofthe hero image; a title of an article about the corresponding inventor;a first 300 characters from the article; and a link to an externalwebpage or section of an external microsite containing the remainder ofthe article. In this example, the interactive visual ad can include achild card containing a link to a video (rather than a link to anexternal webpage) showing a technology developed by a correspondinginventor, an interview with the inventor, or a short about theinventor's impact on the culture, and technology; and the web browseraccessing the webpage containing the interactive visual ad can play thisvideo within a video player over the webpage when the expanded variantof this child card is selected by the user.

In yet another example, the interactive visual ad is populated withcontent related to an upcoming theatrical release (i.e., a film). Inthis example, the interactive visual ad includes: a parent cardcontaining the title of the film, a billboard image for the film (i.e.,a billboard parent hero image), and an abstract reciting the releasedate of the film; a first child card including an image of a firstleading actor in the film and the name of the character played by thefirst leading actor; a second child card including an image of a secondleading actor in the film and the name of the character played by thesecond leading actor; a third child card including an image of thefilm's director and the name of the director; a fourth child cardincluding an image of a key scene in the film and a “Get the backstory”title; and a fifth child card containing a second billboard image fromthe fill with a “See the trailer” title. In this example, when a childcard shown in the visual element within a webpage is selected and anexpanded window thus opened over the webpage: the expanded variant ofthe first child card can present a second image of the first leadingactor and a link to an external webpage or article about the firstleading actors experience on set during filming of the film; theexpanded variant of the second child card can present a quote from thesecond leading actor's character in the film and a link to an externalwebpage or article about the second leading actor's character; theexpanded variant of the third child card can present a filmography ofthe film's director and a link to an external webpage or article aboutthe how this film breaks new cinematic ground; and the expanded variantof the fourth child card can include a link to a trailer for the film,which the web browser can play within a video player over the webpagewhen the expanded variant of the fourth child card is selected by theuser.

In another example, the interactive visual ad is populated with contentrelated to editorial content related to the future automobile market andpublished in a microsite on behalf of a financial services institution.In this example, the interactive visual ad includes: a parent cardcontaining a logo of the financial services institution, a titlereciting “Cars: 2030,” and an abstract reciting “In 15 years, the autoindustry will change drastically”; and a set of child cards, each childcard containing a section title and hero image relating to one ofefficiency and power sources, materials technology and regulations,autonomous vehicles, supply chain, competition, internet-connectedvehicles, and emerging markets. In this example, when a child card shownin the visual element within a webpage is selected and an expandedwindow thus opened over the webpage, the expanded variant of each childcard can present either: an enlarged version of the hero image andone-sentence abstract of the related section of the editorial content;or an enlarged version of the hero image and a related secondary image.The expanded variant of each child card can also present a link (e.g.,in the form of a “Read more→” hyperlink) to the related section of theeditorial content in the external microsite, and the website containingthe interactive visual ad can open a link in the same browser tab or ina new browser tab when the corresponding child card is selected by theuser.

In yet another example, the interactive visual ad is populated withcontent related to a sports team. In this example, the interactivevisual ad includes: a parent card containing the team's logo, the nameof the team, and the team's motto; a first child card containing animage of the team's current lineup and a section title indicating a linkto learn more about the team's current lineup; a second child cardcontaining an image of the team's stadium and a section title relatingto the history of the stadium; a third child card containing an image oflast year's MVP and a section title including the player's name and MVPstatus; a fourth child card containing an image of a significant trophywon by the team and a section title indicating when the trophy was lastwon by the team; and a fifth child card containing an image of the teamplaying its rival and a section title regarding the team's prospects andchallenges for the upcoming season. In this example, when a child cardshown in the visual element within a webpage is selected and an expandedwindow thus opened over the webpage: the expanded variant of the firstchild card can present a first paragraph of an article about returningand new members of the team and a link to this complete article on anexternal webpage; the expanded variant of the second child card canpresent an abstract on the history of the team's stadium and a link toan external webpage about the stadium, its construction, and importantgames won in the stadium; the expanded variant of the third child cardcan present GIF of the player making an MVP-winning play below anexpanded version of the image of the player and a link to a completevideo segment of this play; the expanded variant of the fourth childcard can include a first paragraph of an article related to the team'shistoric wins of trophy and an article within the microsite describingthe team's historic seasons; and the expanded variant of the fifth childcard can include a link to an article within the microsite describingother teams that the team will compete with in the upcoming season andthe team's competition history with these other teams.

In other examples, the interactive visual ad can be populated withcontent related to a television show, a sporting event, a clothingbrand, a designer, a political candidate, a school, or an automotivemanufacturer or automobile model, such as extracted or duplicated inpart from editorial content—related to this brand—contained in anexternal microsite. However, the interactive visual ad can includecontent in any form from any other brand, microsite, or other contentpublisher.

5. Document Insertion

Block S130 of the method S100 recites in response to a swipe input overthe visual element following insertion of the visual element into adocument rendered on a display of a computing device, indexing throughthe set of child cards rendered over the parent card within the visualelement. Generally, in Block S130, the ad platform, ad exchange,publisher ad server, advertising agency ad server, or other contentdistribution network can insert the interactive visual ad into a webpageor other document accessed by a computing device.

As described above, various Blocks of the method S100 can be executed byan ad platform hosted on a remote computer system, such as a remoteserver. The ad platform can: retrieve existing media from an externalmicrosite, existing digital cover and media from a remote database, orgenerated by a journalist, editor, or advertiser through an advertiserportal, etc.; and then—automatically or based on guidance fromjournalist, editor, or advertiser—transform these media into a visualelement, parent card, child cards, expanded variants of child cards, anda callout for an expanded window. The ad platform can package thesecards and callout into an interactive visual ad that can later beinserted inline within a document (e.g., a webpage or mobileapplication) and can make the interactive visual ad available forretrieval by the advertiser; or upload the visual element to an adexchange, to a publisher ad server, to an advertising agency ad server,or to another content distribution network.

Later, when a user navigates to a publisher's webpage via a web browseror to a mobile application via a native application (hereinafter an“app”) executing on her smartphone, smartwatch, tablet, or othercomputing device, a web server hosted by the publisher can returncontent or pointers to content for the webpage (e.g., in HypertextMarkup Language, or “HTML”, or a compiled instance of a code languagenative to a mobile operating system), including formatting for thiscontent and a publisher ad tag that points the web browser or app to thepublisher's ad server (e.g., a network of external cloud servers). Thead server can then implement an ad selector to select a particular ad toserve to the web browser or app and either: return the selected addirectly to the web browser or app; or return a second ad tag thatredirects the browser or app to an advertiser or publisher's ad server.In the latter case, the advertiser or publisher ad server can return athird ad tag that redirects the web browser or app to a content deliverynetwork, which may include a network of cloud servers storing rawcreative graphics for the ad, and the content delivery network canreturn the selected ad to the web browser.

In the foregoing implementation, if the ad server selects theinteractive visual ad, the ad server or content delivery network, etc.can return the visual element in the form of an HTML iframe element tothe web browser, which can then place the iframe element within thewebpage. The visual element can present the parent card and all or asubset of the child cards wrapped within the parent card and selectivelytrigger the expanded window containing expanded variants of the childcards based on user interactions with the iframe element (i.e., thevisual element) according to various Blocks of the method S100.

In one implementation described above, the document into which thevisual element is embedded can include native content distinct from theparent card, the set of child cards, and/or expanded variants of the setof child cards.

In another implementation described in U.S. patent application Ser. No.15/217,879, the visual element: can be inserted into a document renderedwithin a window executed by the computing device inserted between linesof text and/or images within the document; and can translate within thewindow inline with the document in response to a scroll input, such as aswipe along a scroll axis of the computing device. For example, at afirst time, the visual element can relocate from a first position in thewindow to a second position above the first position in the window inresponse to a scroll-up event that moves the document downward withinthe window; and, at a second time, the visual element can relocate froma third position in the window to a fourth position below the thirdposition in the window in response to a scroll-up event that moves thedocument downward within the window.

6. Orientation

In one variation in which the interactive visual ad is served to amobile computing device (e.g., a smartphone or a tablet), theinteractive visual ad implements Blocks S130, S132, S140, and S142 toserve related streams of content in four information densitytiers—including a first tier of information density in parent card, asecond tier in each child card, a third tier in each expanded childcard, and a fourth tier in a link to external content (e.g., amicrosite)—when the mobile computing device is held in a portraitorientation. However, the interactive visual ad can omit the third tierof information density when the mobile computing device is held in alandscape orientation. In particular, because size (i.e., height andwidth) of a child card contained in the visual element in landscapeorientation may be substantially similar to the size of the expandedvariant of child card, the visual element can trigger the web browsercontaining the interactive visual ad to open a hyperlink assigned to achild card—rather than open the expanded window—when the child card isselected from the visual element. In the landscape orientation, thevisual element can also insert additional content—such as a textualabstract or secondary image—from the expanded variant of a child cardinto the child card when the mobile computing device is held in thelandscape orientation. (Alternatively, the visual element can omit thesecond tier of information density and instead insert an expandedvariant of each child into the visual element rather that showingoriginal versions of the child cards in the visual element when themobile computing device is held in the landscape orientation.)

7. Metrics

As shown in FIG. 3 , the visual element (or the ad platform, etc.) canalso track user interactions with content contained in the parent andchild cards and generate a user engagement metric representing thedegree and nature of these interactions. In particular, the visualelement can collect data related to interactions between the interactivevisual ad and a user viewing the interactive visual ad on a computingdevice and packages these interaction data into one or more metricsindicative of user engagement with the interactive visual ad.

In one implementation, the visual element: tracks when the ad content isloaded onto the page; tracks a duration that the interaction visual adis rendered on the display of the computing device; tracks a number oflateral scroll events that shift child cards horizontally into and outof view within the visual element while the visual element is loadedonto a webpage within a web browser; and/or maintains a count of anumber of child cards exposed (e.g., viewed) within the visual element.The visual element can then generate an engagement metric that isproportional to this duration, number of lateral scroll events, and/orchild card count.

The visual element can also track: a number of instances in which achild card in the visual element is selected (thus triggering theexpanded window to open); a duration of time that the expanded window isopen; a number of expanded variants of child cards exposed within theexpanded window; a number of lateral scroll events that shift expandedchild cards horizontally into and out of view within the expandedwindow; a number of instances in which an expanded variation of a childcard in the expanded window is selected to trigger the web browser tonavigate to an external site containing related content; and which cardor visual element is selected to trigger triggering the computing deviceto navigate to an external landing page. The visual element can thenupdate the engagement metric proportional to these values.

For example, the parent card can define a first information density tierand a container for child cards. Each child card in the set of childcards can define a second information density tier greater than thefirst information density tier. (Expanded variants of child cards candefine a third information density tier greater than the secondinformation density tier.) The external document can define a fourthinformation density tier greater than the third information densitytier. In this example, the visual element can classify an engagementlevel of a particular user interacting with the visual element based ona greatest of the first information density tier, the second informationdensity tier, the third information density tier, and the fourthinformation density tier viewed and/or selected by the user over apredefined impression (e.g., while the visual element is in view withinthe window). The visual element can then serve the engagement level to aremote interaction database, such as a remote database hosted by the adpublisher.

When aggregating these values into the engagement metric, the visualelement can weight these values equally or unequally, such as byassigning a greatest weight to the duration of time that the expandedwindow is open, a next greatest weight to a number of times that anexpanded variant of a child card is selected within the expanded window,then a next greatest weight to a number of expanded child cards shown inthe expanded window, etc.

In the variation described above in which a child card includes a linkto a video and in which the web browser containing the visual elementopens and plays the video when the child card is selected, the visualelement can also track a duration of the video that is replayed for theuser. For example, the visual element can generate a second engagementmetric for the user proportional to the percentage of the video replayedby the web browser, such as by assigning an engagement quartile for thevideo to the user based on whether less than 25% of the video wasreplayed (e.g., a first quartile), between 25% and 50% of the video wasreplayed (e.g., a second quartile), between 50% and 75% of the video wasreplayed (e.g., a third quartile), or more than 75% of the video wasreplayed (e.g., a fourth quartile).

In the variation described above in which the interactive visual adincludes a dynamic child card, such as a dynamic child card including asequence of frames in a video segment, the visual element can alsotrack: a number of vertical scroll events or vertical scroll directionchanges that trigger forward and reverse seeking through the videosegment within the dynamic child card; and/or a proportion of frames inthe video segment replayed within the child card. The visual element canthen generate a third engagement metric representing the user'sinteractions with the dynamic child card based on these values.

The visual element can thus generate multiple unique engagement metricsfor various interactions between the user and the visual element, childcard, dynamic child cards, videos, expanded variations of child cards,the expanded window, and external links within the interaction visualad. Alternatively, the visual element can fuse these engagement metricsinto a composite engagement metrics representing the user's overallengagement with the interaction visual ad. The visual element can thenreturn these unique engagement metrics and/or the composite engagementmetric to the ad platform. However, the visual element can track userinteractions with content in the interactive visual ad and transformthese interaction data into one or more engagement metrics according toany other method or schema.

8. Hotspots

As shown in FIG. 4 , one variation of the method includes: inserting aparent card, including advertising content and a set of selection areas(or “hotspots”), into a visual element in Block S110; linking each childcard in a set of child cards to a selection area in the set of selectionareas, wherein each child card includes a hero image and a link to arelated external document in Block 122; following insertion of thevisual element into a document rendered on a display of a computingdevice, in response to detecting selection of a first selection area inthe set of selection areas over the parent card, rendering a first childcard corresponding to the first selection area over the parent card inthe visual element in Block S124; in response to selection of a childcard, in the set of child cards, within the visual element, triggeringthe computing device to open an expanded window—over thedocument—including expanded variants of each child card in the set ofchild cards in Block S132; and, in response to selection of an expandedvariant of a particular child card, in the set of child cards, withinthe expanded window, triggering the computing device to navigate to aparticular external document associated with the particular child cardin Block S142.

Generally, in this variation of the method, the visual element isconfigured to: render the parent card, such as a hero image or anadvertisement, that includes a set of selection areas (or “hotspots”)arranged over discrete regions of the parent card; and, in response toselection of a particular selection area by a user, render a child cardlinked to the particular selection area and representing the selectionarea in a greater degree of detail (i.e., a higher information densitytier). In this variation, the visual element can be configured toselectively conceal higher information density tiers until selected(i.e., explicitly requested through an input) by a user. Thus, thevisual element can render information density tiers proportional to auser's interest and engagement with content rendered in the visualelement.

8.1 Selection Areas and Linked Child Cards

As shown in FIG. 4 , Block S110 of the method S100 recites inserting theparent card, which can include a set of selection areas, such as“hotspots” or icons, arranged over discrete areas of the parent card. InBlock S122 of the method S100, the computing device can link each childcard in a set of child cards to a selection area in the set of selectionareas, each child card including a hero image and a link to a relatedexternal document; and, in response to detecting selection of a firstselection area in the set of selection areas over the parent card,rendering a first child card corresponding to the first selection areaover the parent card in the visual element in Block S124. Generally, inBlocks S11 o, S122, and S124, the visual element links child cards torelevant selection areas of the parent card such that, by selecting aparticular selection area, the visual element can render a more detailedview (e.g., zoomed-in view with an abstract describing the selectionarea) of content encompassed by the particular selection and/orsurrounding the particular selection area

For example, the parent card can include a hero image depicting a roomwith a sofa, a side table, a lamp, a rug, a blanket, and a pair ofpillows. The computing device can render the primary image withpulsating icons, such as a red dot, arranged over each of the sofa, theside table, the lamp, the rug, the blanket, and the pair of pillows. Inresponse to selection of a pulsating icon arranged over (or proximal)the lamp, the visual element can render a lamp child card including azoomed-in image of the lamp and a textual abstract describing the lamp,including information such as the designer of the lamp, a year the lampwas first manufactured, and design prizes awarded to the lamp.

However, the set of child cards can detail content encompassed by theselection areas in any other suitable way.

8.2 Expanded Variants

As described above, Block S132 of the method S100 recites, in responseto selection of a child card, in the set of child cards, within thevisual element, triggering the computing device to open an expandedwindow over the document, the expanded window including expandedvariants of each child card in the set of child cards; and Block S142 ofthe method S100 recites, in response to selection of an expanded variantof a particular child card, in the set of child cards, within theexpanded window, triggering the computing device to navigate to aparticular external document associated with the particular child card.Generally, in this variation, the visual element displays higherinformation density tiers related to selection areas of the parent cardand/or a particular child card in response to detecting interaction(i.e., selection over the visual element) with the visual element inBlocks S132 and S142.

In the example described above, in response to selection of the lampchild card, the visual element can open an expanded window rendered overthe visual element and over the document and can render an expandedvariant of the lamp child card including the zoomed-in image, a video ofhow the lamp works and various rooms in which the lamp has beeninstalled and used, a textual abstract describing the history of thelamp, a short biography of the designer, etc. Upon selection of theexpanded variant of the lamp child card, the computing device cannavigate to an external website (e.g., an auction website) in which auser may bid on the lamp, learn more about technical specifications ofthe lamp, manufacture of the lamp, and search for items similar to thelamp.

Alternatively, in another variation, in response to selection of aparticular child card within the visual element, the computing devicecan navigate directly to a particular external document defined in alink (e.g., a URL hyperlink) associated with the particular child cardrather than triggering the computing device to navigate to an expandedvariant of the particular child card.

8.3 Metrics

As described above, the visual element can classify an engagement levelof a user with the visual element based on a greatest informationdensity tier the user interacted with through the visual element duringan impression. Generally, the visual element can record and quantify howmuch information—at what level of abstraction and for what duration oftime—a user viewed through the visual element and/or an expanded window,thereby quantifying an impact of the content advertised within thevisual element on brand lift and/or conversion for the user.

In particular, the visual element can define a first information densitytier characterizing content of the parent card; define a secondinformation density tier characterizing content of the set of childcards and greater than the first information density tier; define athird information density tier characterizing content of the expandedvariants of the set of child cards; and define a fourth informationdensity tier corresponding to the external document. In response to aninteraction with the first information density tier for less than athreshold duration of time and/or a threshold number of scroll-down andscroll-up events relocating the visual element within the window of thecomputing device, the visual element can classify the interaction as alowest engagement level. In response to an interaction with the secondinformation density tier, such as selection of a selection area of theparent card to navigate to a child card, the visual element can classifythe interaction as a second engagement level, greater than the lowestengagement level. In response to an interaction with the thirdinformation density tier, such as selection of a particular child cardto open an expanded variant of the particular child card, the visualelement can classify the interaction at a third engagement level greaterthan the second engagement level. As described above, the visual elementcan then serve the engagement level to a remote server database, such asan ad server or a database hosted by an ad publisher.

Furthermore, the visual element can calculate a total engagement levelaccounting for every information density tier viewed in the visualelement. For example, the visual element can calculate an engagementlevel based on a duration each information density tier is viewed in thevisual element weighted according to (i.e., proportional to) informationdensity rendered in the visual element.

However, the visual element can classify and quality engagement levelwith the parent card, a child card, an expanded variant of a child card,and/or the external document related to the parent card in any othersuitable way.

The systems and methods described herein can be embodied and/orimplemented at least in part as a machine configured to receive acomputer-readable medium storing computer-readable instructions. Theinstructions can be executed by computer-executable componentsintegrated with the application, applet, host, server, network, website,communication service, communication interface,hardware/firmware/software elements of a user computer or mobile device,wristband, smartphone, or any suitable combination thereof. Othersystems and methods of the embodiment can be embodied and/or implementedat least in part as a machine configured to receive a computer-readablemedium storing computer-readable instructions. The instructions can beexecuted by computer-executable components integrated bycomputer-executable components integrated with apparatuses and networksof the type described above. The computer-readable medium can be storedon any suitable computer readable media such as RAMs, ROMs, flashmemory, EEPROMs, optical devices (CD or DVD), hard drives, floppydrives, or any suitable device. The computer-executable component can bea processor but any suitable dedicated hardware device can(alternatively or additionally) execute the instructions.

As a person skilled in the art will recognize from the previous detaileddescription and from the figures and claims, modifications and changescan be made to the embodiments of the invention without departing fromthe scope of this invention as defined in the following claims.

I claim:
 1. A method for serving interactive content to a usercomprising: inserting a parent card, comprising advertising content,into a visual element; inserting a set of child cards over the parentcard in the visual element to generate an interactive visualadvertisement, each child card, in the set of child cards, comprising ahero image, advertising content related to the parent card, and a linkan external document associated with the child card; inserting thevisual element into an electronic document rendered on a display of acomputing device accessed by the user; in response to a first swipeinput, entered by the user at the computing device, over the visualelement, indexing through the set of child cards rendered over theparent card within the visual element; and in response to selection of afirst child card, in the set of child cards, within the visual element:triggering the computing device to open an expanded window over theelectronic document; rendering expanded variants of child cards, in theset of child cards, within the expanded window; in response to a secondswipe input over the expanded window, indexing through expanded variantsof the set of child cards rendered within the expanded window; and inresponse to selection of a first expanded variant of a first child card,in the set of child cards, within the expanded window, the first childcard comprising a first link, triggering the computing device tonavigate to a first external document associated with the first childcard based on the first link.
 2. A method for serving interactivecontent to a user comprising: loading an interactive visualadvertisement into a visual element loaded within an electronic documentrendered by a computing device accessed by the user, the interactiveadvertisement comprising: a parent card comprising a visualadvertisement; and a set of child cards, each child card in the set ofchild cards comprising: advertising content associated with the visualadvertisement of the parent card; and a link to an external documentassociated with advertising content presented within the child card; inresponse to the visual element entering a viewport of the computingdevice, rendering the parent card within the visual element; and inresponse to selection over the parent card: rendering a first childcard, in the set of child cards, adjacent the visual advertisement; andin response to receiving a swipe input over the first child card:indexing between the first child card and a second child card in the setof child cards; and rendering the second child card, in replacement ofthe first child card, adjacent the visual advertisement; and in responseto selection of a first child card, in the set of child cards,comprising a first link, triggering the computing device to navigate toa first external document associated with advertising content presentedwithin the child card based on the first link.
 3. A method comprising:inserting a parent card comprising visual advertising content into avisual element loaded within an electronic document rendered within adisplay of a computing device accessed by a user; inserting a set ofchild cards into the parent card to generate an interactive visualadvertisement, each child card, in the set of child cards, comprisingadvertising content associated with the parent card and a link to anexternal document associated with the child card; and in response toselection of the parent card by the user: triggering the computingdevice to open an expanded window over the electronic document;rendering a first child card, in the set of child cards, adjacent visualadvertising content of the parent card within the expanded window; inresponse to receiving a first user input over the interactive visualadvertisement: indexing from the first child card to a second childcard, in the set of child cards; and rendering the second child cardadjacent visual ad content of the parent card, in replacement of thefirst child card, within the expanded window; and in response toselection of a child card, in the set of child cards, triggering thecomputing device to navigate to an external electronic documentassociated with visual advertising content of the parent card and linkedto the child card.